<template>
  <div>
    <section>
      <hr>
      <a class="section-title" href="javascript:void(0);">FEATURED TAGS</a>
      <div class="section-container">
        <a class="tag" href="javascript:void(0);" :title="tag.tagName" 
          v-for="(tag, index) in tagList" v-bind:key="index" @click="toTagPage(tag.id)"
        >
          {{tag.tagName}}
        </a>
      </div>
    </section>
    <section>
      <hr>
      <a class="section-title" href="javascript:void(0);">ABOUT ME</a>
      <div class="section-container">
        <p style="letter-spacing: 1px; margin-bottom: 10px;">
          {{blogger.describe}}
        </p>
        <p style="margin-bottom: 10px; font-weight: bold">
          ✉️ {{blogger.email}}
        </p>
        <a class="gitee" href="javascript:void(0);">Gitee</a>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogger: {
        describe: "一名头发越来越少的程序猿",
        email: "yunjiev@163.com",
        gitee: ""
      },
      tagList: [
        {id: 1, tagName: "Java"},
        {id: 2, tagName: "Vue"},
        {id: 3, tagName: "Nginx"},
        {id: 4, tagName: "Mysql"},
        {id: 5, tagName: "Redis"},
        {id: 6, tagName: "Shiro"}
      ]
    }
  },
  methods: {
    toTagPage(tagId) {
      this.$router.push({ 
        name: 'tags',
        params: {
          tagId: tagId
        }
      })
    }
  }
}
</script>

<style scoped>
.section-title:link {
  text-decoration: none;
  color: gray;
  font-weight: bold;
  letter-spacing: 1px;
}
.section-title:hover {
  text-decoration: none;
  color: #337ab7;
  font-weight: bold;
  letter-spacing: 1px;
}
.section-container {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #bfbfbf;
}
.tag:link {
  display: inline-block;
  border: 1px solid #bfbfbf;
  border-radius: 999em;
  padding: 0 10px;
  color: #bfbfbf;
  line-height: 24px;
  font-size: 12px;
  text-decoration: none;
  margin: 0 8px 10px 0;
  letter-spacing: 1px;
}
.tag:hover {
  display: inline-block;
  border: 1px solid #337ab7;
  border-radius: 999em;
  padding: 0 10px;
  color: #337ab7;
  line-height: 24px;
  font-size: 12px;
  text-decoration: none;
  margin: 0 8px 10px 0;
  letter-spacing: 1px;
}
.gitee:link {
  color: #bfbfbf;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}
.gitee:hover {
  color: #337ab7;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}
</style>